<!-- voluntary.vue -->
<template>
  <ActivityNavbar />
  <scroll-view @scrolltolower="onScrolltolower" refresher-enabled @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered" class="scroll-view" scroll-y>
    <!-- 志愿活动分类面板 -->
   <!--  <CategoryPanel :list="categoryList" /> -->

    <!-- 推荐志愿活动 -->
    <RecommendVoluntary ref="recommendRef" />
  </scroll-view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ActivityNavbar from '../voluntary/components/ActivityNavbar.vue'
import CategoryPanel from '../voluntary/components/ActivityPanel.vue'
import RecommendVoluntary from './components/RecommendVoluntary/RecommendVoluntary.vue'

// 导入图片
import hiringIcon from '@/static/icon/hiring.png'
import processingIcon from '@/static/icon/processing.png'
import finishIcon from '@/static/icon/finish.png'

const recommendRef = ref()

const categoryList = ref([
  { id: 1, name: '招募中', icon: hiringIcon },
  { id: 2, name: '进行中', icon: processingIcon },
  { id: 3, name: '已完成', icon: finishIcon },
])
const isTriggered = ref(false)

// 自定义下拉刷新
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  console.log('下拉刷新')
   try {
    // 重置推荐志愿活动数据并等待完成
    await recommendRef.value.resetData()
     await recommendRef.value.getMore()
    
    // 如果需要重新加载分类数据，取消注释下面一行
    // await getVoluntaryCategoryListData()
    
  } catch (error) {
    console.error('刷新失败:', error)
  } finally {
    // 确保无论如何都结束下拉刷新状态
    isTriggered.value = false
  }
}

// 滚动到底部
const onScrolltolower = () => {
  console.log('滚动到底部')
  recommendRef.value.getMore()
}
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  height: calc(100vh - 50px);
  /* 根据导航栏高度调整 */
  flex: 1;
}
</style>